<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据展示</title>

		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<%--		引入Echartsjs文件--%>
		<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
			<script src="${pageContext.request.contextPath}/js/china.js"></script>
		</head>
	
	<body class="layui-layout-login">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<!--注册量-->
		<div id="dayCount" style="width: 600px;height:400px;"></div>

		<%--		中国地图--%>
		<div id="china" style="width: 600px;height:400px;"></div>
	</body>

	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//注册量
		var dayCount = echarts.init(document.getElementById('dayCount'));
		//初始化 Echarts 对象
		var myChina = echarts.init(document.getElementById('china'));

		$.ajax({
			url:'/Cmfz/user/selectNum',
			dataType:"json",
			success:function(data){
				var option = {
					//图表的标题
					title: {
						text: '持明法洲男女人数对比'
					},
					// 工具栏
					tooltip: {},
					// legend 传奇 在数学中指的是 系列
					// 在代码中 代表数据的类型
					legend: {
						data:['人数']
					},
					// xAxis x轴坐标
					xAxis: {
						data: ["男","女"]
					},
					// y 轴坐标 自动生成
					yAxis: {},
					// 给x轴赋值
					series: [{
						// name 必须和 legend 中的配置一样
						name: '人数',
						// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
						type: 'line',
						// x轴坐标对应的坐标值
						data: data
					}]

				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		})
		$.ajax({
			url:"${pageContext.request.contextPath}/user/selectWeek",
			success:function (data) {
				// 指定图表的配置项和数据
				var option = {
					//图表的标题
					title: {
						text: '持明法洲用户注册量变化'
					},
					// 工具栏
					tooltip: {},
					// legend 传奇 在数学中指的是 系列
					// 在代码中 代表数据的类型
					legend: {
						data:['注册量']
					},
					// xAxis x轴坐标
					xAxis: {
						data: ["一周","两周","三周"]
					},
					// y 轴坐标 自动生成
					yAxis: {},
					// 给x轴赋值
					series: [{
						// name 必须和 legend 中的配置一样
						name: '注册量',
						// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
						type: 'line',
						// x轴坐标对应的坐标值
						data: data
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				dayCount.setOption(option);

			}
		})
			// 中国地图的ajax
			$.ajax({
				url:"${pageContext.request.contextPath}/user/selectProvince",
				success:function (data) {
					// 中国地图的图表参数
					//    配置地区分布图表数据
					var option3 = {
						title : {
							text: '用户地区分布',
							left: 'center'
						},
						tooltip : {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data:['用户人数']
						},
						visualMap: {
							min: 0,
							max: 25000,
							left: 'left',
							top: 'bottom',
							text:['高','低'],           // 文本，默认为数值文本
							calculable : true
						},
						toolbox: {
							show: true,
							orient : 'vertical',
							left: 'right',
							top: 'center',
							feature : {
								mark : {show: true},
								dataView : {show: true, readOnly: false},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						series : [
							{
								name: '用户人数',
								type: 'map',
								mapType: 'china',
								roam: false,
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: true
									}
								},
								// 后台响应数据应该是 List<Map> map 中两个key必须是 name 和 value
								// 后台响应的数据中Map的key如果不是 name 和 value 不会有效果
								data:data
							}
						]
					};


					// 将参数赋值给Echarts对象
					myChina.setOption(option3);
				}
			})

	</script>
</html>
